/* color palette from <https://github.com/vuejs/theme> */
:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;

  --vt-c-black: #181818;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;

  --vt-c-indigo: #2c3e50;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}

/* semantic color variables for this project */
:root {
  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);

  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);

  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);

  --section-gap: 160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);

    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);

    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  position: relative;
  font-weight: normal;
}

body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  transition: color 0.5s, background-color 0.5s;
  line-height: 1.6;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}




:root {
  --f-table-border: #ededed;
}

.table-page {
  margin: 0 15px 1rem;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
}

.table-search-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}



.table-search-box .search-item,
.table-search-box .table-query-item {
  display: flex;
  align-items: center;
  margin-right: 15px;
  padding: 0 0 0.6em;
}

.search-item>label,
.search-item>.label,
.table-query-item>label,
.table-query-item>.label {
  min-width: 5em;
  text-align: right;
  font-weight: normal;
  font-size: 0.57rem;
  color: var(--f-label-color);
  font-weight: 500;
}


.table-operation-box {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.3rem 1rem;
  background-color: #fbfbfb;
  border-top: 1px solid var(--f-table-border);
  border-left: 1px solid var(--f-table-border);
  border-right: 1px solid var(--f-table-border);
}

.table-operation-box button {
  margin-bottom: 0 !important;
}

.table-edit-from .el-input,
.table-edit-from .el-textarea {
  max-width: 20em;
}

.table-edit-from .el-form-item__label {

  text-align: right;

}

.table-operator-column {
  padding: 0 1em;
}

.table-data-box .el-table thead tr {
  color: #32353A;
  font-weight: 500;
  height: 44px;
  font-size: 14px;
}


.table-data-box .el-table thead th {
  background-color: #fbfbfb;
  text-align: center;
  border-color: var(--f-table-border) !important;
}

.table-data-box .el-table,
.table-data-box .el-table td {
  border-color: var(--f-table-border) !important;
}

.table-data-box .el-table td {
  padding: 10px 0;
}

.table-data-box .el-table td.is-left .cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.table-page-box .el-pagination {
  margin: 15px 1rem 0;
}

.table-page-box {
  min-height: 24px;
  background-color: white;
  justify-content: flex-end;
}

.table-data-box .el-table::before {
  background-color: var(--f-table-border);
}

.table-data-box .el-table__fixed::before,
.table-data-box .el-table__fixed-right::before {
  background-color: var(--f-table-border);
}

.form-page {
  flex-grow: 1;
  width: 100%;
  padding: 15px 15px 0;
  position: relative;
  margin-bottom: 4rem;
}

.form-page .data-form {
  align-self: stretch;
  padding: 0 15px 15px;
  background-color: #fff;
  border-radius: 4px;
}

.form-page .data-form>.form-item {
  overflow: hidden;
  border-bottom: 1px solid #E5E8EC;
}

.form-page .data-form>.form-item:last-child {
  border-bottom: none;
}

.form-page .form-item:not(.from-operation) {
  flex-direction: column;
}

.form-page .form-item .title {
  padding: 30px 0;
  font-size: 0.92rem;
  font-weight: bold;
}

.form-page .form-item .data {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-column-gap: 50px;
  width: fit-content;
}

.form-page .from-operation {
  background-color: #fff;
  padding: 15px 0;
  border-radius: 4px;
  position: fixed;
  bottom: 8px;
  margin-bottom: 0;
  box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 0.25);
}

.full-dialog {
  width: 100vw !important;
  min-height: 100vh !important;
  margin: 0 !important;
}

.table-edit-from.border-form {
  border: 1px solid #ececec;
  border-radius: 0.4rem;
}

.edit-box {
  display: flex;
  flex-wrap: nowrap;
}

.edit-box .label {
  width: 8em;
  text-align: right;
  margin-right: 0.5em;
}

.el-dialog.one-dialog {
  width: 460px;
}

.el-dialog.two-dialog {
  width: 680px;
}

.el-dialog.three-dialog {
  width: 780px;
}

.el-dialog.two-dialog .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-dialog.three-dialog .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-dialog.two-dialog .el-form .el-input-number .el-input,
.el-dialog.one-dialog .el-form .el-input-number .el-input {
  width: auto;
}

.el-dialog.three-dialog .el-form .el-input-number .el-input,
.el-dialog.one-dialog .el-form .el-input-number .el-input {
  width: auto;
}

.el-dialog.three-dialog .el-form .el-input,
.el-dialog.two-dialog .el-form .el-input,
.el-dialog.three-dialog .el-form .el-textarea,
.el-dialog.two-dialog .el-form .el-textarea {
  width: 230px;
}

.el-dialog.one-dialog .el-form .el-input {
  width: 338px;
}

.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before {
  margin-right: 0;
}

.el-dialog .el-dialog__header {
  border-bottom: 1px solid #eee;
}

.el-dialog.one-dialog .el-dialog__footer,
.el-dialog.two-dialog .el-dialog__footer {
  border-top: 1px solid #eee;
  text-align: right;
}

.el-dialog.one-dialog .el-dialog__footer,
.el-dialog.three-dialog .el-dialog__footer {
  border-top: 1px solid #eee;
  text-align: right;
}

.el-button {
  font-weight: 500 !important;
}

.el-table {
  overflow: auto;
}

.el-table__header-wrapper,
.el-table__body-wrapper,
.el-table__footer-wrapper {
  overflow: visible;
}

.el-table__body-wrapper {
  overflow-x: visible !important;
}

/* 这个是为了解决前面样式覆盖之后伪类带出来的竖线 */
.el-table::after {
  position: relative;
}

.el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-dialog__wrapper .el-dialog {
  margin-top: 0 !important;
}

.el-dialog__wrapper .el-dialog .el-dialog__body {
  overflow: auto;
  max-height: 80vh;
}

.el-button--text.warning.is-disabled {
  color: #ffd666;
}

.el-button--text.warning {
  color: #ffba00;
}

.el-button--text.danger.is-disabled {
  color: #fef0f0;
}

.el-button--text.danger {
  color: #F56C6C;
}

.el-button--text.primary.is-disabled {
  color: #00ffff;
}

.el-button--text.primary {
  color: #00d0d0;
}


/* 文字颜色 */
:root {
  --f-c-root: #1890FF;
  --f-b-root: #F0F2F5;
  --f-tag-color: #909399;
  --f-label-color: #606266;
}
.f-c-000 {
  color: #000000;
}

.f-c-666 {
  color: #666666;
}

.f-c-fff {
  color: #ffffff;
}

.f-c-333 {
  color: #333333;
}

.f-c-grey {
  color: #9598A2;
}

.f-c-9d {
  color: #9D9D9D;
}

.f-c-9b {
  color: #9b9b9b;
}

.f-c-a6a {
  color: #A6A6A6;
}

.f-c-a7a {
  color: #A7A7A7;
}

.f-c-d6d {
  color: #D6D6D6;
}

.f-c-999 {
  color: #999;
}

.f-c-97 {
  color: #979797;
}

.f-c-75 {
  color: #757575;
}

.f-c-8f9 {
  color: #8F9194;
}

.f-c-f23 {
  color: #FF2323;
}

.f-c-root {
  color: var(--f-c-root);
}


/* 背景色 */

.b-c-root {
  background-color: var(--f-c-root);
}

.b-c-fff {
  background-color: #ffffff;
}

.b-c-666 {
  background-color: #666;
}

.b-c-f1f {
  background-color: #f1f1f1;
}

.b-c-dcd {
  background-color: #dcdcdc;
}

.b-c-bdb {
  background-color: #BDBDBD;
}

.b-c-f025 {
  background-color: #f0f2f5;
}


@media only screen and (max-width: 3840px),
only screen and (max-device-width:3840px) {
    html,
    body {
        font-size: 48px;
    }
}

@media only screen and (max-width: 2560px),
only screen and (max-device-width:2560px) {
    html,
    body {
        font-size: 32px;
    }
}


@media only screen and (max-width: 1920px),
only screen and (max-device-width:1920px) {
    html,
    body {
        font-size: 24px;
    }
}


@media only screen and (max-width: 1440px),
only screen and (max-device-width:1440px) {
    html,
    body {
        font-size: 18px;
    }
}

@media only screen and (max-width: 1366px),
only screen and (max-device-width:1366px) {
    html,
    body {
        font-size: 17.75px;
    }
}

@media only screen and (max-width: 1280px),
only screen and (max-device-width:1280px) {
    html,
    body {
        font-size: 16px;
    }
}

@media only screen and (max-width: 1200px),
only screen and (max-device-width:1200px) {
    html,
    body {
        font-size: 23.04px;
    }
}

@media only screen and (max-width: 1024px),
only screen and (max-device-width:1024px) {
    html,
    body {
        font-size: 19.6608px;
    }
}


/*布局*/

* {
    /* font-family: 'Microsoft YaHei'; */
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
.i-xy-start,
.i-yx-start {
  display: inline-flex;
  align-items: center;
  justify-content: start;
}

.i-yx-start {
  flex-direction: column;
}

.xy-start,
.yx-start {
  display: flex;
  justify-content: start;
  align-items: center;
}
.yx-start {
  flex-direction: column;
}

.i-xy-center,
.i-yx-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.i-yx-center {
    flex-direction: column;
}

.xy-center,
.yx-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.yx-center {
    flex-direction: column;
}

.i-xy-between,
.i-yx-between {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}

.i-yx-between {
    flex-direction: column;
}

.xy-between,
.yx-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flexWarp {
    flex-wrap: wrap;
}
.flex-wrap {
    flex-wrap: wrap;
}
.yx-between {
    flex-direction: column;
}

.al-self-start {
    align-self: flex-start;
}

.jf-start {
    justify-content: flex-start;
}

.jf-end {
    justify-content: flex-end;
}

.al-start {
    align-items: flex-start;
}

.al-end {
    align-items: flex-end;
}

.al-str {
    align-items: stretch;
}

.auto-grow {
    flex-grow: 1;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.hidden {
    display: none;
}

.no-wrap-text {
    white-space: nowrap;
}

.one-wrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.two-wrap {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.three-wrap {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.four-wrap {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.third-wrap {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.text-center {
    text-align: center;
}

.pointer {
    cursor: pointer;
}

.wait {
    cursor: wait;
}

.no-mouse {
    cursor: not-allowed;
}

.garden {
    border-radius: 50%;
}


/* 这个是设置a标签的默认状态去除下划线 */

a {
    text-decoration: none;
}


/* 这个是设置a标签的访问过后的状态去除下划线 */

a:visited {
    text-decoration: none;
}


/* 这个是设置a标签的鼠标覆盖状态去除下划线 */

a:hover {
    text-decoration: none;
}


/* 这个是设置a标签的活跃状态去除下划线 */

a:active {
    text-decoration: none;
}


/*其他*/

.border-radius-box {
    border-radius: 0.5rem;
}

.bold {
    font-weight: bold;
}

.left-title {
    margin-right: 0.33rem;
}

.member-header {
    border-radius: 50%;
    overflow: hidden;
}

.fontSize5 {
    font-size: 0.5rem;
}

.fontSize53 {
    font-size: 0.53rem;
}

.fontSize58 {
    font-size: 0.58rem;
}

.fontSize67 {
    font-size: 0.67rem;
}

.fontSize75 {
    font-size: 0.75rem;
}

.fontSize76 {
    font-size: 0.76rem;
}

.fontSize83 {
    font-size: 0.83rem;
}

.fontSize92 {
    font-size: 0.92rem;
}
.fontSize1 {
    font-size: 1rem;
}
.fontSize125 {
    font-size: 1.25rem;
}
.fontSize15 {
    font-size: 1.5rem;
}

.p {
    line-height: 0.75rem;
}

.textCenter {
    text-align: center;
}

.textJustify {
    text-align: justify;
}

.FW600 {
    font-weight: 600;
}

.FW300 {
    font-weight: 300;
}

.bgColor666 {
    background: #666;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.between {
    display: flex;
    justify-content: space-between;
}

.FW600 {
    font-weight: 600;
}

.padding-1rem {
    padding: 1rem;
}

.positionAbsolute {
    position: absolute
}

.positionRelative {
    position: relative
}

.radius04 {
    border-radius: 0.04rem;
}

.radius08 {
    border-radius: 0.08rem;
}

button {
    outline: none;
}
.select-none{
    user-select: none;
}
